<template>
  <div class="swipe-box">
    <div class="swipe-box2">
      <el-carousel :interval="5000" arrow="always" height="7rem">
        <el-carousel-item v-for="(item,index) in 4" :key="index">
          <a href="/showfood?fid="><img src="../../assets/img/t4.png" /></a>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
import { request } from "../../network/request";

export default {
    name: "Swipes",
    data() {
      return {
        imglist:''
        
      }
    },
    created() {
      request({
          url: "/firstpage/queryFirstPageLunBoTu",
          }).then((res) => {
            this.imglist = res.data.data
            console.log(res.data.data);
          })
            .catch((err) => {
                console.log(err);
          });
    },
}
</script>
<style>
.swipe-box {
  width: 100%;
  margin: 0 auto;
  margin-top:1.1rem;
}

.swipe-box2{
  width: 85%;
  margin: 0 auto;
}
.swipe-box img {
  width: 100%;
  height: 100%;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

</style>